<template>
	<view>


		<view class="flex-col section_8">
		  <view class="flex-row justify-between items-center section_9"  @click="go('/pages/shops/index')">
		    <text class="font_6">附近商家</text>
		    <text class="font_2 text_8">更多</text>
		  </view>

		  <view class="flex-col">
		    <view class="flex-row items-center group_6 space-x-12" v-for="(item, index) in list" :key="index"  @click="go('/pages/shops/shops?id='+item.id)">
		      <view class="flex-col justify-start items-center shrink-0 image-wrapper">
		        <image  class="shrink-0 image_12" mode="aspectFill" :src="item.cover"  />
		      </view>
		      <view class="flex-col flex-auto space-y-14">
		        <view class="flex-col group_7">
		          <text class="self-start font_name_text text_10">{{item.name}}</text>
		          <text class="self-end font_distance text_9">距离： {{getdistance(item.longitude,item.latitude)}}</text>
		        </view>

		       <view class="flex-row space-x-4">
		          <view   v-for="(itemm,indexx) in item.goodsCates" :key="indexx" class="flex-row justify-start items-center" :class="'text-wrapper_'+(indexx+7)">
					  <text @tap.stop="go('/pages/search/list?shopId='+item.id+'&cateId='+itemm.id)"   v-if="itemm" class="font_cate_text">{{itemm.name}}</text>
					  </view>
		        </view>


		        <text class="self-start font_address">地址：{{item.address}}</text>
		      </view>
		    </view>
		  </view>
		</view>


		<!-- <block v-if="showType == 1">
         	<block v-else>
			<goodslist class="" :offset="1.2" :sortType="sortType" :list="list"></goodslist>
			<no-data v-if="list.length <= 0"></no-data>
			<view :style="isIphonex ? 'padding-bottom:94px' : 'padding-bottom:60px'"></view>
		</block> -->
	</view>
</template>

<script>
	const API = require('@/utils/api/shops.js').default;
	const $ = require('@/utils/api.js');
	let self;
	export default {
		props: {
			shopId: {
				type: String,
				default: ''
			},
			type: {
				default: ''
			},
			showType: {
				default: 1,
			},
			pageSize: {
				default: 20
			},
			catePid: {
				default: ''
			},
			cateTid: {
				default: ''
			},
			cateId: {
				default: ''
			},
			isSpread: {
				default: false
			}
		},
		data() {
			return {
				  items: [null, null, null],
				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				isIphonex: uni.getStorageSync('isIphonex') ? uni.getStorageSync('isIphonex') : false,
				list: [],
				page: 1,
				totalPage: 1,
				sort: '',
				sortType: 1,
				title: ''
			};
		},




		methods: {
			changeSort(type) {
				if(type == 'price'){
					this.sort = this.sort == 'price desc' ? 'price asc' : 'price desc';
				}else{
					this.sort = type;
				}
				this.page = 1;
				this.getList();
			},
			getList() {
				// getShopList() {
					$.ajax({
						// url: API.shopListWithShopCate,
						url: "common/shop/getShopWithCateListByCateId",
						data: {
							shopId: self.shopId,
							catePid: self.shopId != '' ? '' : self.catePid,
							cateTid: self.shopId != '' ? '' : self.cateTid,
							cateId: self.shopId != '' ? '' : self.cateId,
							shopCatePid: self.shopId != '' ? self.catePid : '',
							shopCateTid: self.shopId != '' ? self.cateTid : '',
							shopCateId: self.shopId != '' ? self.cateId : '',
							title: self.title,
							type: self.type,//1普通商品>>2秒杀商品>>3拼团商品
							sort: self.sort,
							status: '',
							minAmount: self.min,
							maxAmount: self.max,
							provinceCode: self.province,
							page: self.page,
							pageSize: 5,
							spreadStatus: self.spread != '' ? '1' : '',
							longitude: uni.getStorageSync('longitude'),
							latitude: uni.getStorageSync('latitude')
						},
						method: 'GET',
						success(res) {
							let list = [];
							if (self.page != 1) {
								list = self.list.concat(res.data.list);
							} else {
								list = res.data.list ? res.data.list : [];
							}
							self.shoptotalPage = res.data.totalPage;
							self.list  = list;
						}
					})
				// },
			},
			loadMore() {
				if(this.page < this.totalPage) {
					this.page += 1;
					this.getList();
				}
			},
			init() {
				this.page = 1;
				this.getList();
			},
		},
		created() {
			self = this;
			this.init();
		},
		// <block v-for="(item, index) in list" :key="item">
		// 	<view>￥{{ item.price | getFinallPrice }}</view>
		// </block>
		// 总价：￥{{ finalMoney | getFinallPrice }}
		// <div>{{getcount(count)}}</div>  <!--这个count来源于script setup里面的count，我没有向外暴露-->
		filters: {//过滤器做到共用
			getFinallPrice(price) {
				return price.toFixed(2);
			}
		},
		computed: {
			i18n() {
				return this.$t('search')
			},
			finalMoney() {//实时监听总价变化，用于购物车中
			    let finalMoney = 0;
			    for (let item of this.list) {
			        finalMoney += item.price;
			    }
			    return finalMoney;
			},
			 getdistance()
			    {
			      return (longitude,latitude)=>{
								let longitude1 =  uni.getStorageSync('longitude');
								let latitude1 = uni.getStorageSync('latitude');	
													
										
								 
								 let distance
								 if(longitude1&& latitude1){
									 distance  =   this.mapfun.getDistance(longitude1,latitude1,longitude,latitude)
								 }else{
									 distance  =  "-"
								 }
								 
								 return distance;
											
			      }
			    }
		},
		onReachBottom() {
		}
	}
</script>

<style  >

	/* //code.fun生成的全局 */
	@import url('./../../../static/css/style.css');
	.font_2 {
	  font-size: 24rpx;
	  font-family: HarmonyOSSansSC;
	  line-height: 22rpx;
	  color: #666e7a;
	}
	.font_6 {
	  font-size: 32rpx;
	  font-family: HarmonyOSSansSC;
	  line-height: 30rpx;
	  color: #081329;
	}
	.text_8 {
	  line-height: 23rpx;
	  opacity: 0.6;
	}
	.section_8 {
	  margin: 20rpx 0 0;
	  background-color: #ffffff;
	  border-radius: 20rpx;
	  filter: drop-shadow(0px 0px 8rpx #ffbd5208);
	  overflow: hidden;
	  border: solid 1.2rpx #feeccf;
	}
	.section_9 {
	  padding: 28rpx 20rpx 40rpx 24rpx;
	  background-image: linear-gradient(180deg, #fac87826 -36.1%, #ffffff75 92.3%);
	}
	.group_6 {
	  padding: 0 16rpx 28rpx;
	  margin-bottom:5px;


	   border-bottom:1px solid #feeccf;
	}
	.image-wrapper {

	  border-radius: 12rpx;
	  overflow: hidden;
	  background-size: 100% 100%;
	  background-repeat: no-repeat;
	  width: 236rpx;
	  height: 178rpx;
	}
	.image_12 {
	  width: 236rpx;
	  height: 178rpx;
	}
	.group_7 {
	  height: 34rpx;
	}


	.font_distance {
	  font-size: 20rpx;
	  /* line-height: 19rpx; */
	  color: #c5bfc4;
	}
	.text_9 {
	  margin-top: -36rpx;
	  color:rgb(67, 207, 124)
	}

	.font_address {
	  font-size: 24rpx;
	  line-height: 22rpx;
	  color: #666e7a;
	}

	.font_cate_text {
	  font-size: 28rpx;
	  line-height: 26rpx;
	  /* color: #081329; */

	  padding: 12rpx;
	  /* background-color: #43cf7c1a; */
	  border-radius: 4rpx;
	}

	.text-wrapper_7 {
	  background-color: #43cf7c1a;
	  	  color:#43cf7c
	}

	.text-wrapper_8 {
	  background-color: #42cccf1a;
	  	  color:#42cccf
	}

	.text-wrapper_9 {
	  background-color: #FAF2EC;
	  color:#cf7d42
	}

	.space-x-4 > view:not(:first-child),
	.space-x-4 > text:not(:first-child),
	.space-x-4 > image:not(:first-child) {
	  margin-left: 8rpx;
	}
	.space-x-12 > view:not(:first-child),
	.space-x-12 > text:not(:first-child),
	.space-x-12 > image:not(:first-child) {
	  margin-left: 24rpx;
	}
	.space-y-14 > view:not(:first-child),
	.space-y-14 > text:not(:first-child),
	.space-y-14 > image:not(:first-child) {
	  margin-top: 28rpx;
	}
</style>
